<template>
  <div class="app-container">
    <!--工具条-->
    <el-form ref="form" label-width="160px" inline>
      <!--级联选择器-->
      <el-form-item label="选择课程和年级">
        <el-cascader
          v-model="value"
          clearable
          style="width: 200px"
          size="mini"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        />
      </el-form-item>
    </el-form>
    <!--数据列表-->
    <el-table :data="scoreData" stripe border style="width: 100%">
      <el-table-column label="序号" width="60">
        <template v-slot="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学生姓名" width="80">
        <template v-slot="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable sort-by="daily_score" label="平时成绩">
        <template v-slot="scope">
          <span>{{ scope.row.daily_score || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable sort-by="work_score" label="作业成绩">
        <template v-slot="scope">
          <span>{{ scope.row.work_score || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable sort-by="mid_score" label="期中考试成绩">
        <template v-slot="scope">
          <span>{{ scope.row.mid_score || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable sort-by="final_score" label="期末考试成绩">
        <template v-slot="scope">
          <span>{{ scope.row.final_score || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable sort-by="average" label="平均分">
        <template v-slot="scope">
          <span>{{ scope.row.average || 0 }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as courseApi from "@/api/course";

export default {
  name: "Course",
  data() {
    return {
      // 级联选择器数据
      value: [],
      // 考试批次数据
      testTime: [],
      // 成绩数据
      scoreData: [],
      // 新增考试表单数据
      form: {
        title: "",
        note: "",
      },
    };
  },
  computed: {
    ...mapState("classL", ["classList"]),
    // 根据考试批次和班级整合级联选择器数据
    options() {
      const options = [];
      this.testTime.forEach((item) => {
        const obj = {
          value: item.id,
          label: item.title,
          children: [],
        };
        this.classList.forEach((item2) => {
          const obj2 = {
            value: item2.id,
            label: item2.name,
          };
          obj.children.push(obj2);
        });
        options.push(obj);
      });
      return options;
    },
  },
  mounted() {
    this.$store.dispatch("classL/getClassList");
    // 获取考试批次
    this.getTestTime();
  },
  methods: {
    // 获取考试批次
    getTestTime() {
      courseApi.getExamBatch().then((res) => {
        this.testTime = res.data;
      });
    },
    // 获取成绩数据
    getScoreData() {
      // 整理考试批次和班级id
      const params = {
        testId: this.value[0],
        classId: this.value[1],
        type: 0,
      };
      // 获取成绩数据
      courseApi.getScoreData(params).then((res) => {
        this.scoreData = res.data;
        // 计算各科及格率
        if (this.scoreData.length) {
          this.coursePassRate();
        }
      });
    },
    // 级联选择器change事件 value为数组 ['考试批次id', '班级id']
    handleChange(value) {
      this.value = value;
      this.getScoreData();
    },
    // 计算各科及格率
    coursePassRate() {
      // 总人数
      const total = this.scoreData.length || 1;
      // 语文
      const daily_score =
        this.scoreData.filter((item) => item.daily_score >= 60).length / total;
      // 数学
      const work_score =
        this.scoreData.filter((item) => item.work_score >= 60).length / total;
      // 英语 / total
      const mid_score =
        this.scoreData.filter((item) => item.mid_score >= 60).length / total;
      // 物理 / total
      const final_score =
        this.scoreData.filter((item) => item.final_score >= 60).length / total;
      // 添加到成绩数据中
      this.scoreData.push({
        name: "及格率",
        daily_score: (daily_score * 100).toFixed(2) + "%",
        work_score: (work_score * 100).toFixed(2) + "%",
        mid_score: (mid_score * 100).toFixed(2) + "%",
        final_score: (final_score * 100).toFixed(2) + "%",
        // 有一个 \ 是转义字符，两个 \\ 才是一个 \
        average: "\\",
      });
    },
  },
};
</script>

<style scoped>
.right-float {
  float: right;
}

/*
  el-table样式穿透 表格居中
*/
div/deep/ .el-table th > .cell {
  text-align: center;
}

div/deep/ .el-table .cell {
  text-align: center;
}
</style>
